<script setup lang="ts">
interface ItemType {
  index: number
  name: string | number
  status: number
}

import { ref, reactive, onMounted } from 'vue'

import ToolsPanel from '@/views/components/ToolsPanel.vue'
import BoxPanel from '@/views/components/BoxPanel.vue'

const boxPanelRef = ref<InstanceType<typeof BoxPanel>>()
const data: ItemType[] = reactive([])

onMounted(() => init())

const toolsBtnVisible = ref(true)

/**
 * 数据初始化
 */
const init = () => {
  for (let i = 0; i < 9; i++) {
    data.push({
      index: i,
      name: i + 1,
      status: 0
    })
  }
}
</script>

<template>
  <div class="lucky-draw-panel__wrapper">
    <div class="lucky-draw-panel__title">🎆 幸 运 大 抽 奖 🎆</div>

    <tools-panel
      :visible="toolsBtnVisible"
      @play="boxPanelRef!.playEvent()"
      @pause="boxPanelRef!.pauseEvent()"
      @shuffle="boxPanelRef!.shuffleEvent()"
    />
    <box-panel ref="boxPanelRef" :data="data" />
  </div>
</template>

<style scoped lang="scss">
.lucky-draw-panel__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f7faff;

  .lucky-draw-panel__title {
    font-size: 42px;
    margin: 24px 0;
  }
}
</style>
